<template>
  <view class="change-password-container">
    <view class="form-container">
      <!-- 提示信息 -->
      <view class="tips-section">
        <u-icon name="info-circle" size="40" color="#ff9900"></u-icon>
        <text class="tips-text">为了您的账户安全，请定期修改密码</text>
      </view>
      
      <!-- 密码表单 -->
      <view class="form-section">
        <u-form :model="formData" ref="formRef" label-width="180">
          <u-form-item label="原密码" prop="oldPassword" required>
            <u-input 
              v-model="formData.oldPassword" 
              placeholder="请输入原密码"
              type="password"
              :border="true"
              border-color="#e4e7ed"
              :clearable="true"
            ></u-input>
          </u-form-item>
          
          <u-form-item label="新密码" prop="newPassword" required>
            <u-input 
              v-model="formData.newPassword" 
              placeholder="请输入新密码(6-20位)"
              type="password"
              :border="true"
              border-color="#e4e7ed"
              :clearable="true"
            ></u-input>
          </u-form-item>
          
          <u-form-item label="确认新密码" prop="confirmPassword" required>
            <u-input 
              v-model="formData.confirmPassword" 
              placeholder="请再次输入新密码"
              type="password"
              :border="true"
              border-color="#e4e7ed"
              :clearable="true"
            ></u-input>
          </u-form-item>
        </u-form>
        
        <!-- 密码强度提示 -->
        <view class="password-tips">
          <view class="tip-item">
            <u-icon name="checkmark-circle" :color="passwordStrength >= 1 ? '#3cc51f' : '#ccc'" size="16"></u-icon>
            <text :class="{ 'active': passwordStrength >= 1 }">密码长度6-20位</text>
          </view>
          <view class="tip-item">
            <u-icon name="checkmark-circle" :color="passwordStrength >= 2 ? '#3cc51f' : '#ccc'" size="16"></u-icon>
            <text :class="{ 'active': passwordStrength >= 2 }">包含字母</text>
          </view>
          <view class="tip-item">
            <u-icon name="checkmark-circle" :color="passwordStrength >= 3 ? '#3cc51f' : '#ccc'" size="16"></u-icon>
            <text :class="{ 'active': passwordStrength >= 3 }">包含数字</text>
          </view>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="button-section">
        <u-button 
          type="primary" 
          :loading="loading"
          @click="handleSubmit"
          :custom-style="{
            borderRadius: '50rpx',
            height: '88rpx',
            backgroundColor: '#3cc51f',
            borderColor: '#3cc51f',
            fontSize: '32rpx'
          }"
        >
          确认修改
        </u-button>
        
        <u-button 
          plain
          @click="handleCancel"
          :custom-style="{
            borderRadius: '50rpx',
            height: '88rpx',
            marginTop: '24rpx',
            fontSize: '32rpx'
          }"
        >
          取消
        </u-button>
      </view>
      
      <!-- 安全提示 -->
      <view class="security-tips">
        <view class="security-title">
          <u-icon name="lock" size="20" color="#666"></u-icon>
          <text>安全提示</text>
        </view>
        <view class="security-content">
          <text>• 密码修改成功后需要重新登录</text>
          <text>• 建议使用字母、数字组合的密码</text>
          <text>• 不要使用过于简单的密码</text>
          <text>• 不要将密码告诉他人</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { changePassword } from '@/api/auth'
import { logout } from '@/utils/auth'

export default {
  data() {
    return {
      loading: false,
      formData: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  
  computed: {
    // 计算密码强度
    passwordStrength() {
      const password = this.formData.newPassword
      if (!password) return 0
      
      let strength = 0
      
      // 检查长度
      if (password.length >= 6 && password.length <= 20) {
        strength++
      }
      
      // 检查是否包含字母
      if (/[a-zA-Z]/.test(password)) {
        strength++
      }
      
      // 检查是否包含数字
      if (/[0-9]/.test(password)) {
        strength++
      }
      
      return strength
    }
  },
  
  methods: {
    validateForm() {
      // 验证原密码
      if (!this.formData.oldPassword) {
        uni.showToast({
          title: '请输入原密码',
          icon: 'none'
        })
        return false
      }
      
      // 验证新密码
      if (!this.formData.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return false
      }
      
      // 验证新密码长度
      if (this.formData.newPassword.length < 6 || this.formData.newPassword.length > 20) {
        uni.showToast({
          title: '新密码长度必须在6-20位之间',
          icon: 'none'
        })
        return false
      }
      
      // 验证确认密码
      if (!this.formData.confirmPassword) {
        uni.showToast({
          title: '请输入确认密码',
          icon: 'none'
        })
        return false
      }
      
      // 验证两次密码是否一致
      if (this.formData.newPassword !== this.formData.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return false
      }
      
      // 验证新密码不能与原密码相同
      if (this.formData.oldPassword === this.formData.newPassword) {
        uni.showToast({
          title: '新密码不能与原密码相同',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    async handleSubmit() {
      if (!this.validateForm()) {
        return
      }
      
      this.loading = true
      
      try {
        await changePassword({
          oldPassword: this.formData.oldPassword,
          newPassword: this.formData.newPassword
        })
        
        uni.showModal({
          title: '密码修改成功',
          content: '请使用新密码重新登录',
          showCancel: false,
          success: () => {
            // 清除登录信息
            logout()
          }
        })
        
      } catch (error) {
        console.error('修改密码失败:', error)
        
        // 根据错误类型显示不同的提示
        let errorMsg = '修改密码失败'
        if (error.message) {
          errorMsg = error.message
        } else if (error.code === 1006) {
          errorMsg = '原密码错误，请重新输入'
        }
        
        uni.showToast({
          title: errorMsg,
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.loading = false
      }
    },
    
    handleCancel() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.change-password-container {
  min-height: 100vh;
  background: #f8f9fa;
}

.form-container {
  padding: 30rpx;
}

.tips-section {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .tips-text {
    flex: 1;
    font-size: 28rpx;
    color: #ff9900;
    margin-left: 20rpx;
    line-height: 1.5;
  }
}

.form-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.password-tips {
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .tip-item {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    
    text {
      font-size: 26rpx;
      color: #999;
      margin-left: 12rpx;
      
      &.active {
        color: #3cc51f;
      }
    }
  }
}

.button-section {
  padding: 0 30rpx 30rpx;
}

.security-tips {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  
  .security-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-left: 12rpx;
    }
  }
  
  .security-content {
    text {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 2;
      margin-bottom: 8rpx;
    }
  }
}
</style>

